<!--
* description: 整车销售---车辆管理--验收入库
* author:xlc
* createdDate: 2021-5-30
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      style="margin:15px"
      :visible="popupsVisible"
      :title="titleName"
      center
      :modal="false"
      width="50%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
      <div
        v-loading="btnLoading"
      >
        <!-- 表单组件 -->
        <one-table-template
          ref="multipleTable"
          :dynamic-buttons="tableButtons"
          :dynamic-components="tableComponents"
          :dynamic-form-fields="formField"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import api from '@/api/vehicleManagement'
import dialogHeader from '@/components/dialogHeader'
import Vue from 'vue'
export default {
  components: {
    OneTableTemplate,
    dialogHeader
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, 'supplierMessage-edit'], () => {
      next()
    })
  },
  props: {
    titleName: {
      type: String,
      default: ''
    },
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      btnLoading: false,
      selectdata: {
        type: Object,
        default: () => {}
      },
      // 网格查询API配置对象
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.save(),
          text: this.$t('sys.button.save'),
          name: 'save', // 按钮图标样式
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey2',
          type: '',
          size: 'small',
          clickEvent: () => this.closeEdit(),
          text: '取消',
          position: 'right'
        }
      ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            // 显示组件
            {
              compKey: 'compKey1',
              labelName: '质量状态：',
              codeField: 'hostQualityState',
              isRequire: true,
              lookuptype: 'VE0268',
              component: () => import('@/components/org/commonSelect'),
              type: 'dropdownList',
              span: 12,
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '备注说明：',
              isRequire: true,
              codeField: 'remark',
              isShow: true,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 12,
              isMust: true
            },
            {
              compKey: 'compKey3',
              labelName: '备注说明：',
              isRequire: false,
              codeField: 'remark',
              isShow: false,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 12,
              isMust: true
            },
            {
              compKey: 'compKey4',
              labelName: '上传图片：',
              codeField: 'hostQualityPic',
              component: () => import('@/components/upload/up.vue'),
              isMust: true,
              span: 12
            }
          ],
      // 动态生成网格列
      formField: { hostQualityState: '', remark: '', hostQualityPic: '' }
    }
  },
  watch: {
    'popupsVisible': {
      handler(newVal) {
        if (this.titleName === '质量状态编辑') {
          this.formField.hostQualityState = this.dataForForm.hostQualityState
          this.formField.remark = this.dataForForm.remark
          this.formField.hostQualityPic = this.dataForForm.hostQualityPic
        }
        if (newVal) {
          this.$watch('formField.hostQualityState', (newVal) => {
            if (newVal !== 'A') {
              this.tableComponents[1].isShow = true
              this.tableComponents[2].isShow = false
            } else {
              this.tableComponents[1].isShow = false
              this.tableComponents[2].isShow = true
            }
          }, { deep: true })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    },
    // 保存
    save() {
      this.$utils.validataMoth(this, 'validpage')
      var data = Object.assign(this.dataForForm, this.formField)
      if (this.valid) {
        this.btnLoading = true
        if (this.titleName !== '验收入库') {
          this.$requestAPI(this.$getParams({
            apiConfig: api.updateState,
            variables: { ...data }
          })).then(response => {
            if (response.msg) {
              this.$message({
                message: response.msg,
                type: 'warn',
                uration: 2000
              })
            }
            if (response.result === '1') {
              this.btnLoading = false
              this.closeEdit('1')
            }
          }).catch(err => {
            this.btnLoading = false
            console.info(err)
          })
        } else {
          this.$emit('save', [{ ...data }])
        }
      }
    }
  }
}
</script>
